<template>
  <div class="cash-list">
    <div class="title">车队现金汇总表</div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="月现金表" name="month"></el-tab-pane>
      <el-tab-pane label="年现金表" name="year"></el-tab-pane>
    </el-tabs>

    <el-form v-if="activeName == 'year'">
      <el-form-item label="选择要结算年份">
        <el-date-picker
          value-format="yyyy"
          type="year"
          @change="handleChange"
          clearable
          v-model="yearTime"
          placeholder="选择要结算年份"
        />
        <el-button
          type="primary"
          style="margin-left: 20px; display: inline-block; width: 80px"
          @click="handleSearch"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-form v-if="activeName == 'month'">
      <el-form-item label="选择要结算月份">
        <el-date-picker
          value-format="yyyy-MM"
          type="month"
          @change="handleChangeMonth"
          clearable
          v-model="monthlyTime"
          placeholder="选择要结算月份"
        />
        <el-button
          type="primary"
          style="margin-left: 20px; display: inline-block; width: 80px"
          @click="handleSearch"
          >查询</el-button
        >

        <el-button
          type="primary"
          v-if="activeName == 'month'"
          @click="handleUnlocked"
          >解锁月结算</el-button
        >
        <el-button
          type="primary"
          style="margin-left: 20px; display: inline-block; width: 80px"
          v-if="activeName == 'month'"
          @click="handleYearLocked"
          >年结算</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      :height="bodyHeight - 130"
      style="margin-top: 10px"
      show-summary
      :summary-method="getSummaries"
      @selection-change="selRowChange"
      @select="selRow"
      @expand-change="saveRowExpand">
      <el-table-column
        fixed="left"
        type="selection"
        width="60"
        prop="id"
        v-if="activeName == 'month'"
      ></el-table-column>

      <el-table-column prop="addTime" label="操作时间" width="180">
      </el-table-column>
      <el-table-column prop="settleTime" label="结算时间" width="180">
      </el-table-column>
      <el-table-column prop="settleName" label="名称"> </el-table-column>
      <!-- <el-table-column prop="settleType" label="结算类型">
            <template slot-scope="scope">
              {{ scope.row.settleType == 0 ? "月结算" : "年结算" }}
            </template>
          </el-table-column> -->
      <el-table-column prop="settleType" label="是否进行年结算">
        <template slot-scope="scope">
          {{ scope.row.settleType == 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column prop="settleInMoney" sortable label="总收入">
      </el-table-column>
      <el-table-column prop="settleOutMoney" sortable label="总支出">
      </el-table-column>
      <el-table-column prop="settleBalance" sortable label="总利润">
      </el-table-column>
      <el-table-column prop="operUser" label="操作员">
        <template slot-scope="scope">
          {{ `${scope.row.operUser.realName} (${scope.row.operUser.uname})` }}
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.page"
      :limit.sync="dg.rows"
      @pagination="getData"
    />
  </div>
</template>
<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import Pagination from "@/components/Pagination";

import * as orderSer from "@/api/services/order.service";

export default {
  name: "CashList",
  mixins: [DataGridBase],
  components: { Pagination },
  data() {
    return {
      selRows: [], // 所选行数组
      rowExpands: [],
      monthlyTime: "",
      dg: {
        total: 0,
        page: 1,
        rows: 10,
      },
      ps: {
        eTime: "",
        // operUname: "", // 操作员账号
        sTime: "",
        // settleMoney: "", // 结算金额
        // settleName: "", // 结算名称
        // settleType: "", // 结算类型
        // timeType: "1", //时间类型
        settleType: 0,
      },
      activeName: "month",
      tableData: [],
      yearTime: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    selRow(selection, row) {
      this.selRows = selection;
    },
    saveRowExpand(row, expandedRows) {
      this.rowExpands.push(row);
    },
    // tab改变事件
    handleTabClick(tab, event) {
      this.ps.settleType = tab.paneName == "year" ? 1 : 0;
      this.getData();
    },
    // 结算月结算
    handleUnlocked() {
      const len = this.selRows.length;
      if (len != 1) {
        this.U.qerror("请选择一条数据");
        return;
      }
      orderSer.unLockSettle({ settleId: this.selRows[0].id }).then((res) => {
        if (res.code == 1) {
          this.U.qsuccess(res.msg);
          this.getData();
        } else {
          this.U.qerror(res.msg);
        }
      });
    },
    //年结算
    handleYearLocked() {
      const len = this.selRows.length;
      if (len === 0) {
        this.U.qerror("请至少选择一条数据");
        return;
      }
      let loading = this.U.qloading("数据请求中...");
      const yearName = moment().format("YYYY") + "现金结算表";
      const yearTime = `${yearName}-01-01 00:00:00`;
      const ids = this.selRows.filter((item) => item.id);
      orderSer.setBankYear({
        settleIds: ids,
        settleName: yearName,
        settleTime: yearTime,
      }).then((res) => {
        if (res.code == 1) {
          this.U.qsuccess("年结算成功");
          this.getData();
        } else {
          this.U.qerror(res.msg);
        }
      });
    },
    handleChangeMonth(month) {
      if (month == null) {
        this.ps.sTime = "";
        this.ps.eTime = "";
        return;
      }
      this.ps.sTime = `${month}-01 00:00:00`;
      const end = moment(`${month}`, "YYYY-MM").daysInMonth();
      this.ps.eTime = `${month}-${end} 23:59:59`;
      this.ps.settleType = 0;
    },
    handleChange(year) {
      if (year == null) {
        this.ps.sTime = "";
        this.ps.eTime = "";
        return;
      }
      let month = `0${moment().month() + 1}`;
      this.ps.sTime = `${year}-01-01 00:00:00`;
      // let end = moment(`${year}-${month}`, "YYYY-MM").daysInMonth();
      this.ps.eTime = `${year}-12-31 23:59:59`;
      this.ps.settleType = 0;
    },
    // 获取列表
    getData() {
      orderSer.getFindSettleList({
        ...this.ps,
        page: this.dg.page,
        rows: this.dg.rows,
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data;
          this.dg.total = res.count;
        } else {
          this.U.qerror(res.msg);
        }
      });
    },
    handleSearch() {
      this.getData();
    },
    // 合并表格
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "汇总";
          return;
        }
        if (this.activeName == "month") {
          if (index === 4) {
            sums[index] = "";
            return;
          }
        } else {
          if (index === 3) {
            sums[index] = "";
            return;
          }
        }

        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
  },
};
</script>

<style scoped>
.title {
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  font-weight: 800;
  text-align: center;
}
</style>
